<template>
  <div class="boxs">
    <el-form
      :model="ruleForm"
      :rules="rules"
      :inline="false"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
    >
      <div class="one">
        <h2 class="tle" v-if="judeg">许可人：</h2>
        <el-form-item label="申请人类型：" prop="picType">
          <el-select v-model="ruleForm.picType" @change="typeChange" placeholder="请选择申请人类型">
            <el-option v-for="(item,index) in options" :label="item.title" :key="index" :value="item.value" ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="有效执照：" prop="region">
                  <el-select v-model="ruleForm.region" placeholder="请选择证件类型">
                    <el-option label="身份证" value="0"></el-option>
                    <el-option label="营业执照" value="1"></el-option>
        </el-select>-->
        <!-- </el-form-item> -->
        <el-form-item prop="upload" label="身份证照片(正反面)：" v-if="ruleForm.picType==1">
          <!--<base-upload @getFile="getFile1">-->
          <!--<span style="color:red">请上传 身份证正面清晰图片，图片大小不能超过500k</span>-->
          <!--</base-upload>-->
          <!--data.append("picbussi",this.ruleForm.picbussi[0])-->
          <!--data.append("picdbcard",this.ruleForm.picdbcard[0])-->
          <!--data.append("picidcard",this.ruleForm.picidcard[0])-->
          <upfile :callback="backCardImage">
            <img :src="img_default['picdbcard']" v-if="img_default['picdbcard']" />
          </upfile>
          <span style="color:#f96900">请上传 一张包含身份证正面和反面 的清晰图片(jpg,png格式)，图片大小不能超过1M</span>
          <div class="exam-img">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
              </div>
            <examimg :imgType="1"></examimg>
          </div>
        </el-form-item>

        <el-form-item prop="upload" label="身份证照片(正面)：" v-if="ruleForm.picType==1">
         
          <upfile :callback="backCardImageMain">
            <img :src="img_default['picidcard']" v-if="img_default['picidcard']" />
          </upfile>
          <span style="color:#f96900">请上传 身份证正面 清晰图片(jpg,png格式)，图片大小不能超过1M</span>
          <div class="exam-img">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
              </div>
            <examimg :imgType="2"></examimg>
          </div>
        </el-form-item>
        <el-form-item
          :prop="must_bus?'upload':''"
          v-if="options[ruleForm.picType]"
          :label="options[ruleForm.picType]['card_title']+'：'">
          <upfile :callback="backImage">
            <img :src="img_default['picbussi']" v-if="img_default['picbussi']" />
          </upfile>
          <span
            style="color:#f96900"
          >请上传 {{options[ruleForm.picType]['card_title']}} 正面清晰图片(jpg,png格式)，图片大小不能超过1M</span>
          <div class="exam-img">
              <div class="img-inform">
                <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
              </div>
            <examimg :imgType="0"></examimg>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button
      type="primary"
      :style="'background:#409EFF'"
      :loading="load"
      @click="submitForm()"
    >{{next}}</el-button>
    <div class="seize" v-if="ruleForm.picType==0"></div>  <!-- 留白 -->
    <!-- 补全信息提示 -->
    <el-dialog title="温馨提示" :close-on-click-modal="false" :visible.sync="remind" width="25%" @close="exit">
      <span>
        您的个人信息不够完整，请完成个人信息，再进行申请，如有疑问请联系客服人员：028-69000891
        或者 028- 69000892
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="exit">取 消</el-button>
        <el-button type="primary" class="sure-btn" @click="ensure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BaseUpload from "./BaseUpload";
import upfile from "../common/upfile.vue";
import examimg from "../common/imgExample.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      remind: false,
      next: "下一步",
      load: false,
      judeg: "",
      imageUrl: "",
      imageUrls: [],
      options: [],
      one_option: {},
        must_bus:true,
      bgcolor: true,
      formData1: new FormData(),
      formData2: new FormData(),
      img_default: {},
      ruleForm: {
        picType: "",
        picbussi: [], //营业执照
        picdbcard: [], //身份证正反面
        picidcard: [], //身份证正面图片
      },
      // ruleForms: {
      //   picType: "",
      //   region: "",
      //   confirmationimg: [],
      // },
      rules: {
        picType: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        //                    region: [
        //                        {required: true, message: "选项不能为空", trigger: "change"},
        //                    ],
        upload: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        //                    confirmationimg1: [{required: true, message: "", trigger: "change"}],
        //                    confirmationimg2: [{required: true, message: "", trigger: "change"}],
      },
      card_files: [],
    };
  },
  watch: {
      "ruleForm.picType": function () {
          this.checkBus()
      },
      "ruleForm.picbussi":function(){},
  },
  methods: {
    ...mapMutations(["changeAllBusState", "changeAllBusStyle"]),
    // 弹窗取消
    exit(){
      this.remind = false;
      this.$router.push("/");
    },
    //弹窗确定
    ensure() {
      this.remind = false;
      this.$router.push(this.$store.getters.basicInfo);
      this.changeAllBusState(this.$store.getters.basicInfo);
      this.changeAllBusStyle("asidelog");
    },
    // 记录申请人类型
    typeChange() {
      this.img_default = {};
      this.$store.commit("setIdCardInfo", {});
      this.$store.commit("setCompanyCardInfo", {});
      this.$store.commit("setPicType", 0);
    },
    //营业执照
    backImage(files) {
      if (files) {
        this.ruleForm.picbussi = files;
        this.img_default.picbussi = "";
         this.bgcolor = false;
      } else {
        this.bgcolor = true;
      }
    },
    //身份证双面
    backCardImage(files) {  
      this.ruleForm.picdbcard = files;
      this.img_default.picdbcard = "";
      //  console.log(this.ruleForm.picdbcard[0].name,"/////")
    },
    //身份证正面
    backCardImageMain(files) {
      this.ruleForm.picidcard = files;
      this.img_default.picidcard = "";
     
    },
    open(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //            imgJudeg2(str) {
    //                if (this.ruleForm.confirmationimg2 == false) {
    //                    this.open1();
    //                    return;
    //                } else {
    //                    if (this.ruleForm.picType) {
    //                        if (this.ruleForm.confirmationimg1 == false) {
    //                            this.open1();
    //                            return;
    //                        }
    //                    }
    //                }
    //                this.submitForm(str);
    //            },
    open1(msg = "请上传商标图片") {
      this.$message({
        message: msg,
        type: "error",
      });
    },
    check_form() {
      if (this.ruleForm.picType == 1) {
        if (!this.img_default.picidcard && this.ruleForm.picidcard.length < 1) {
          this.open1("请上传身份证正面照");
          return false;
        } else if (
          !this.img_default.picdbcard &&
          this.ruleForm.picdbcard.length < 1
        ) {
          this.open1("请上传身份证正反面照");
          return false;
        }
      }
      if(this.must_bus){
          if (!this.img_default.picbussi && this.ruleForm.picbussi.length < 1) {
              this.open1(
                  "请上传" + this.options[this.ruleForm.picType]["card_title"]
              );
              return false;
          }
      }
      return true;
    },
    async submitForm() {
      if (!this.check_form()) return false;
      let _this = this;
      this.next = "请求中";
      this.load = true;
      let data = new FormData();
      //        
        //console.log(this.ruleForm.picbussi[0],this.ruleForm.picdbcard[0],this.ruleForm.picidcard[0],121)
      data.append(
        "picbussi",
        this.ruleForm.picbussi[0] ? this.ruleForm.picbussi[0] : ""
      );
      data.append(
        "picdbcard",
        this.ruleForm.picdbcard[0] ? this.ruleForm.picdbcard[0] : ""
      );
      data.append(
        "picidcard",
        this.ruleForm.picidcard[0] ? this.ruleForm.picidcard[0] : ""
      );
      data.append("picType", this.ruleForm.picType);
        let res = await this.$http({
            method: "post",
            headers: {
                "Content-Type": "multipart/form-data",
            },
            url: "/trademark/distinguish/picdis",
            data: data,
        });
     try{ }
      catch(e){
         //图片识别失败也要跳转
//         this.$message({
//             type:"error",
//             message:"图片识别失败,请手动填写"
//         })
//          _this.$emit("wp", 1, "请完善和更正必要信息");
      }
      _this.next = "下一步";
      _this.load = false;
      if (res.data.code != 200) {
        //修改,什么内容也没有传,也可能会返回非200
        // if (this.ruleForm.picType == 1) {
        //   //身份证
        //   if (!this.img_default.picdbcard) {
        //     _this.open("识别错误", "error");
        //     return;
        //   }
        //   if (!this.img_default.picidcard) {
        //     _this.open("识别错误", "error");
        //     return;
        //   }
        // } else {
        //   //其他类型
        //   if (!this.img_default.picbussi) {
        //     _this.open("识别错误", "error");
        //     return;
        //   }
        // }
      } else {
        //默认将返回数据复制给vuex
    
        let id_card_info = res.data.data.pic;
        if (!this.img_default.picdbcard) {
          //不存在历史正反面身份证
          id_card_info.url = res.data.data.picpath
          
            ? res.data.data.picpath
            : null; //身份证正反面照片地址
        }

        if (this.img_default.picidcard) {
          id_card_info = this.$store.state.id_card_info; //身份证正面地址
        } else {
          //默认图片里面没有,说明修改过身份证
          if (this.ruleForm.picType == 1) {
            if (res.data.data.pic.name == "无" || !res.data.data.pic.name) {
              _this.open("身份证无法识别", "error");
              // return;
            }
          }
          id_card_info.id_card = res.data.data.id_card
            ? res.data.data.id_card
            : null; //身份证正面地址
        }
        this.$store.commit("setIdCardInfo", id_card_info);

        let company_card_info = res.data.data.po;
        if (!this.img_default.picbussi) {
          if (res.data.data.po.name == "无" || !res.data.data.po.name) {
              if(this.must_bus){
                  _this.open("无法识别, 请手动填写或返回上一步重新上传","error");
              }
            // return;
          }
          company_card_info.url = res.data.data.popath
            ? res.data.data.popath
            : null; //营业执照新增数据
        } else {
          company_card_info = this.$store.state.company_card_info; //营业执历史数据
        }

        if (!this.picbussi) {
          this.$store.commit("setCompanyCardInfo", company_card_info);
        }

        this.$store.commit("setPicType", this.ruleForm.picType);
      }
      // _this.open("保存成功");
      _this.$emit("wp", 1, "请完善和更正必要信息");
    },
    //            getFile1(data, data2) {
    //                this.ruleForm.confirmationimg1 = data2;
    //            },
    //            getFile2(data, data2) {
    //                this.ruleForm.confirmationimg2 = data2;
    //            },
    setRuleForm() {
      //                //console.log(2222)
      this.$nextTick(() => {
        let arr = {};
        //如果vuex里面有扫描的信息,则是从第二步返回回来,则需要填充数据,数据从vuex中用助手函数映射出来
        if (this.id_card_info && this.id_card_info.id_card) {
          if (this.id_card_info.id_card.indexOf("http") > -1) {
            arr["picdbcard"] = this.id_card_info.url; //正反面
            arr["picidcard"] = this.id_card_info.id_card; //正面地址
          } else {
            arr["picdbcard"] = this.mconfig.host + this.id_card_info.url; //正反面
            arr["picidcard"] = this.mconfig.host + this.id_card_info.id_card; //正面地址
          }

          //                    this.$set(this.img_default,"picdbcard",this.$store.state.id_card_info.url)
          //                    this.$set(this.img_default,"picidcard",this.$store.state.id_card_info.id_card)
        }

        if (this.company_card_info && this.company_card_info.url) {
          if (this.company_card_info.url.indexOf("http") > -1) {
            arr["picbussi"] = this.company_card_info.url;
          } else {
            arr["picbussi"] = this.mconfig.host + this.company_card_info.url;
          }

          //                    this.$set(this.img_default,"picbussi",this.$store.state.company_card_info.url)
          this.ruleForm.picType = this.picType;
        } else {
          this.ruleForm.picType = 0;
        }
        this.img_default = arr;
        //console.log(this.img_default,4654)
      });
    },
      //验证营业执照是否必传
      checkBus(){
        if(this.$route.query.id==1){
            //如果是注册新增营业执照必传
            this.must_bus=true
        }else{
            //如果是后续,个人时营业执照选填,身份证必传,企业时营业执照必传
            if(this.ruleForm.picType!=1){
                this.must_bus=true
            }else{
                this.must_bus=false
            }
        }
      }
  },
  beforeMount() {
    this.$store.state.finishStatus == 0 && (this.remind = true);
  },
  mounted() {
    this.options = this.mconfig.options;
    this.judeg = this.$store.state.judeg;
      this.checkBus()
    this.setRuleForm();
  },
  created() {},
  computed: {
    ...mapState(["company_card_info", "id_card_info", "picType"]),
  },
  components: {
    BaseUpload,
    upfile,
    examimg
  },
};
</script>
<style lang="less" scoped>
.boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  width: 100%;
  background-color: #fff;

  // min-height: 800px;
  .el-form {
    width: 90%;
  }
  .one {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 18%;
    // justify-content: flex-start;
  }
  .tle {
    margin: 20px 20px;
    font-size: 24px;
  }
  .dialog-footer{
    display: flex;
    justify-content: space-between;
    .el-button{
      background: #fff;
      border: 1px solid #DCDFE6;
      color: #000;
      &:hover{
        background: #ECF5FF;
        color: #669EFF;
      }
    }
    .sure-btn{
      background: #409EFF;
      color: #fff;
      &:hover{
        background: #66B1FF;
        color: #fff;
      }
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    display: block;
    width: 100px;
    height: 40px;
    background-color: #666;
    border: none;
  }
}
.seize {
  height: 162px;
}
.el-select /deep/ .el-input__inner:focus {
  border-color: #ff6633;
}

.el-select-dropdown__item.selected {
  color: #f96900;
}

.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}

.hover {
  background-color: #fff6f0;
}

.el-select-dropdown__item:hover {
  background-color: #fff6f0;
}
.el-form-item{
  position: relative;
}
.exam-img{
    position: absolute;
    top: 0;
    left: 380px;
    display: flex;
    justify-content: space-between;
  }
  .img-inform{
    position: relative;
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    transform: translate(-50%,-50%);
    margin-right: 10px;
  }
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    transform: translate(-50%,-50%);
    font-size: 12px;
    white-space: nowrap;
    padding: 0px 5px 0px 0px;
    color: #f96900;
  }
}
</style>